<template>
  <view class="ui-page ui-page__scroll">
    <uiCellGroup title="基础用法">
      <uiField placeholder="请输入文本内容"></uiField>
       <uiField type="textarea" placeholder="请输入文本内容"></uiField>
    </uiCellGroup>
    <uiCellGroup title="基本">
      <uiField label="基本" placeholder="请输入文本内容"></uiField>
      <uiField label="手机号"></uiField>
      <uiField label="整数"></uiField>
      <uiField label="数字"></uiField>
      <uiField label="密码"></uiField>
    </uiCellGroup>
    <uiCellGroup title="禁用">
      <uiField label="基本" placeholder="请输入文本内容" readonly value="123"></uiField>
      <uiField label="手机号" value="123" disabled></uiField>
    </uiCellGroup>
    <uiCellGroup title="错误提示">
      <uiField label="用户名" placeholder="请输入文本内容" value="123" error></uiField>
      <uiField label="手机号" value="123" error-message="手机号格式错误"></uiField>
      <uiField label="手机号" value="123" error-message="手机号格式错误" error-message-align="center"></uiField>
      <uiField label="手机号" value="123" error-message="手机号格式错误" error-message-align="right"></uiField>
    </uiCellGroup>
    <uiCellGroup title="内容对齐方式">
      <uiField label="用户名" placeholder="请输入文本内容" value="123"></uiField>
      <uiField label="用户名" placeholder="请输入文本内容" value="123" input-align="center"></uiField>
      <uiField label="用户名" placeholder="请输入文本内容" value="123" input-align="right"></uiField>
    </uiCellGroup>
    <uiCellGroup title="插入按钮">
      <uiField label="短信验证码" placeholder="请输入短信验证码" value="123">
        <uiButton type="primary" slot="button" inline size="small">发送短信</uiButton>
      </uiField>
    </uiCellGroup>
  </view>
</template>

<script>
import uiCell from "@/components/base/cell/index.vue";
import uiCellGroup from "@/components/base/cell-group/index.vue";
import uiButton from "@/components/base/button/index.vue";

import uiField from "components/base/field/index";
export default {
  name: "demoFieldComponentPage",
  components: {
    uiCellGroup,
    uiCell,
    uiButton,
    uiField
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss"></style>